<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .box>div {
            flex: 1;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<!-- 用来将jsx语法转化为js语法 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<script type="text/babel">
    // 封装ajax
    function sendAjax(url, method, data = null) {
        return new Promise((reslove, reject) => {
            $.ajax({
                url,
                method,
                data,
                // 设置数据交换类型为json
                dataType: "json",
                success(res) {
                    reslove(res)
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }
    
    // getHoreList();
    
    // 渲染函数
    // function render(hero) {
    //     let dom = (
    //         <div className='box'>
    //             {
    //                 hero.map((item, index) => {
    //                     return (
    //                         <div key={index}>
    //                         <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />
    //                         <div>{item.name}</div>
    //                     </div>
    //                     )
    //                 })
    //             }
    //         </div>
    //     );
    //     ReactDOM.render(dom, document.getElementById("root"))
    // }
   
    // !! 注意函数式组件  函数不能为异步函数(async) 所以封装一个方法

    // 1. 首先定义App根组件 
     function App(props){
        console.log(props)
        // list英雄列表 获取根组件<App/> 要解构出来 
        // 用props接收
        let {list} = props;
        return (
            <div className='box'>
                {
                    // map遍历  生成Hero英雄组件
                    list.map((item,index)=>{
                        return  <Hero  key={index} item={item}/>
                    })
                }
            </div>
        )
    }

    // 2 英雄组件
    function Hero(props){
        // item 是 每一个英雄
        let {item} = props;
        return (
            <div>
                <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />
                <div>{item.name}</div>
            </div>
        )
    }
 //. 获取所有英雄列表  
 // 3. 请求数据 渲染数据
 // 请求到数据 渲染app组件 并且将请求到的英雄列表res.hero传给组件
   async function getHoreList() {
        let res = await sendAjax("https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js", "get");
        console.log(res.hero)
        // 渲染到页面上    list自定义属性
        ReactDOM.render(<App list={res.hero}/>,document.getElementById("root"))
    }
    getHoreList();
</script>

</html>